<template>
  <view class="my">
    <view class="my-top">
      <view class="top0">
        <uni-icons type="bars" size="20"></uni-icons>
        <view class="right">
          <view class="right1">
            <uni-icons type="image" size="15"></uni-icons>
            <text>设置图片</text>
          </view>
            <uni-icons type="paperclip" size="20"></uni-icons>
        </view>
      </view>
      <view class="top1">
        <image :src="userInfo?userInfo.avator:img" class="top1-left"></image>
        <view class="top1-right">
          <view v-if="userInfo" class="text-l">
            <view class="info" style="display: flex;justify-content: baseline;"> 
              <text class="name">{{userInfo.name}}</text>
              <button type="warn" style="height: 40rpx;width: 150rpx;font-size: 10px;text-align: center;" @click="outLogin">退出登录</button>
            </view>
            <text>账号：1234556</text>
            <text>IP属地：{{userInfo.IP}}</text>
          </view>
          <view v-else class="text-l">
            <view class="info" style="display: flex;flex-direction: column;">
              <text class="name" @click="login">登录/注册</text>
              <text>欢迎光顾~</text>
            </view>
          </view>
          <view class="icon-r">
            <uni-icons type="more-filled" color="white" size="20"></uni-icons>
          </view>
        </view>
      </view>
      <view class="top2">
         <text>点击这里，填写简介</text>
      </view>
      <view class="top3" v-show="userInfo">
        <uni-icons type="person-filled" :color="userInfo.sex?'pink':'#1296db'"></uni-icons>
      </view>  
    </view>
    <view class="my-bottom">
      <view class="my-bottom-top1">
        <block v-for="(item,i) in nav" :key="i">
          <view class="item">
            <text>{{!userInfo?'-' :item.num}}</text>
            <text>{{item.text}}</text>
          </view>
        </block>
      </view>
      <view class="my-bottom-top2">
       <text class="title">我的订单</text>
       <view class="icons">
         <block v-for="(item,i) in icons" :key="i">
           <view class="icon">
             <uni-icons v-if="i != 1" custom-prefix="iconfont" :type="item.icon" size="30" :color="item.color"></uni-icons>
             <uni-icons v-else :type="item.icon" size="30" :color="item.color"></uni-icons>
             <text>{{item.text}}</text>
           </view>
         </block>
       </view>
      </view>
      <view class="my-bottom-top3">
        <text class="title">平台服务</text>
        <view class="bottom-icons">
          <block v-for="(item,i) in service" :key="i">
            <view class="icon">
              <uni-icons v-if="i % 2 !=0" custom-prefix="iconfont" :type="item.icon"></uni-icons>
              <uni-icons v-else :type="item.icon"></uni-icons>
              <text>{{item.text}}</text>
            </view>
          </block>
        </view>
      </view>
      <view class="my-bottom-top4">
        <text>查看更多</text>
        <uni-icons type="bottom" size="15"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
  import {mapState,mapMutations} from 'vuex'
  import tabbarBadge from '@/mixins/tabbar-badge.js'
  export default {
    mixins:[tabbarBadge],
    data() {
      return {
        img: 'https://img2.baidu.com/it/u=689735625,1834499467&fm=253&fmt=auto&app=138&f=PNG',
        nav: [{
          num: 924,
          text: '关注'
        },
        {
          num: 10,
          text: '故事'
        },
        {
          num: 26,
          text: '收藏'
        },
        {
          num: 112,
          text: '赞过'
        }
        ],
        icons: [
          {
            icon:'icon-yuyue',
            text:'我的预约',
            color: '#FF9933'
          }, 
          {
            icon : 'flag-filled',
            text: '我的活动',
            color: '#1296db'
          },
          {
            icon: 'icon-xiaofeiquan',
            text: '消费券',
            color: '#FF9933'
          }
        ]
      ,
        service: [
          {
            icon: 'paperplane-filled',
            text:'出行导航'
          },
          {
            icon: 'icon-xiaofeiquan',
            text:'票价查询'
          },
          {
            icon: 'auth',
            text: '人证核验'
          }, 
          {
              icon: 'icon-quanpiao',
              text: '快捷退票'
          },
          {
              icon: 'phone',
              text: '问题反馈'
          },
          {
            icon: 'icon-huiyuan1',
            text: '会员兑换'
          }
        ]
      }; 
    },
    computed: {
      ...mapState('m_user',['userInfo'])
    },
    methods: {
      ...mapMutations('m_user',['updateUserInfo','delUserInfo']),
      outLogin() { 
        // this.userInfo = null
        this.delUserInfo()
        // this.onLoad()
        // this.fetchSomething()
        // const pages = getCurrentPages()
        // const perpage = pages[pages.length - 1]
        // perpage.onLoad()  
        // console.log('还会来')
      },
      login() {
        uni.redirectTo({
            //保留当前页面，跳转到应用内的某个页面
            url: '/subpkg/login/login'
        })
      }
    }
  }
</script>

<style lang="scss">
@import "@/static/iconfont.css";
.my {
  .my-top{
     padding: 20rpx 30rpx;
    background-color: #1296db;
    height: 440rpx;
    .top0 {
      display: flex;
      justify-content: space-between;
      .right {
        display: flex;
        justify-content: space-between;
        width: 100px;
        height: 20px;
        .right1 {
          border-radius: 7px;
          background: rgba(0, 0, 0, 0.5);
          line-height: 20px;
          font-size: 10px;
        }
      }
    }
    .top1 {
      margin: 40rpx 0;
      display: flex;
      justify-content: space-between;
      .top1-left {
        width: 60px;
        height: 60px;
        border-radius: 45%;
        margin-right: 20rpx;
      }
      .top1-right {
        width: 80%;
        color: white;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        .text-l {
          display: flex;
          justify-content: start;
          flex-direction: column;
          .info {
            .name {
              font-weight: bold;
              font-size: 20px;
              color: black;
              margin-right: 10rpx;
              
            }
          }
        }
        
      }
    }
    .top2 {
      font-size: 15px;
      color: white;
    }
    .top3 {
      margin-top: 20rpx;
      // margin: 50rpx 0;
      // margin-bottom: 50rpx;
      width: 30px;
      
      height: 20px;
      background: rgba(0, 0, 0, 0.5);
      // background-color: black;
      text-align: center;
      border-radius: 10px;
    }
  }
  .my-bottom {
    padding: 0 30rpx;
    position: relative;
    .my-bottom-top1 {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 150rpx;
      background-color: white;
      border-radius: 20px;
      transform: translateY(-50%);
      .item{
        display: flex;
        flex-direction: column;
        text-align: center;
        text {
          margin: 10rpx 0;
        }
      }
    }
    .my-bottom-top2 {
      height: 200rpx;
      background-color: white;
      margin-bottom: 60rpx;
      .icons {
        display: flex;
        justify-content: space-around;
        .icon {text-align: center;
          display: flex;
          flex-direction: column;
        }
      }
    }
    .my-bottom-top3 {
      background-color: white;
      .bottom-icons {
        .icon {
          display: flex;
          justify-content: start;
          border-bottom: 1px solid #efefef;
          padding: 15rpx 10rpx;
        }
      }
    }
    .my-bottom-top4 {
      background-color: white;
      // height: 2px;
      font-size: 10px;
      color: gray;
      text-align: center;
      line-height: 35px;
    }
    
  }
}
.title {
        font-size: 19px;
        color: black;
        font-weight: bold;
        display: block;
        padding: 10rpx 0 20rpx 10rpx;
      }
</style>
